import { View, Text, ScrollView, TouchableOpacity, TextInput, StyleSheet, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { theme } from '../../theme';

interface CollectItemProps {
  icon: string;
  label: string;
  onPress?: () => void;
}

function CollectItem({ icon, label, onPress }: CollectItemProps) {
  return (
    <TouchableOpacity style={styles.gridItem} onPress={onPress}>
      <Ionicons name={icon as any} size={24} color={theme.colors.primary} />
      <Text style={styles.gridItemText}>{label}</Text>
    </TouchableOpacity>
  );
}

interface RecordItemProps {
  icon: string;
  title: string;
  date: string;
  onPress?: () => void;
}

function RecordItem({ icon, title, date, onPress }: RecordItemProps) {
  return (
    <TouchableOpacity style={styles.recordItem} onPress={onPress}>
      <View style={styles.recordIconContainer}>
        <Ionicons name={icon as any} size={20} color={theme.colors.primary} />
      </View>
      <View style={styles.recordContent}>
        <Text style={styles.recordTitle}>{title}</Text>
        <Text style={styles.recordDate}>{date} 采集</Text>
      </View>
      <Ionicons name="chevron-forward" size={20} color={theme.colors.text.tertiary} />
    </TouchableOpacity>
  );
}

export default function CollectScreen() {
  const router = useRouter();
  
  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      {/* Search Bar */}
      <View style={styles.searchContainer}>
        <View style={styles.searchBar}>
          <Ionicons name="search" size={20} color={theme.colors.text.tertiary} />
          <TextInput
            style={styles.searchInput}
            placeholder="搜索信息"
            placeholderTextColor={theme.colors.text.tertiary}
          />
        </View>
      </View>

      {/* Grid Menu */}
      <View style={styles.gridContainer}>
        <CollectItem 
          icon="business" 
          label="楼房" 
          onPress={() => router.push('/collect/building')} 
        />
        <CollectItem 
          icon="home" 
          label="房屋" 
          onPress={() => router.push('/collect/house')} 
        />
        <CollectItem 
          icon="people" 
          label="户籍" 
          onPress={() => router.push('/collect/household')} 
        />
        <CollectItem 
          icon="person" 
          label="人口" 
          onPress={() => router.push('/collect/person')} 
        />
        <CollectItem 
          icon="videocam" 
          label="部件" 
          onPress={() => router.push('/collect/component')} 
        />
        <CollectItem 
          icon="storefront" 
          label="企业" 
          onPress={() => router.push('/collect/business')} 
        />
        <CollectItem 
          icon="warning" 
          label="事件" 
          onPress={() => router.push('/collect/event')} 
        />
        <CollectItem 
          icon="home" 
          label="院落" 
          onPress={() => router.push('/collect/courtyard')} 
        />
        <CollectItem 
          icon="ellipsis-horizontal" 
          label="更多" 
          onPress={() => router.push('/collect/more')} 
        />
      </View>

      {/* Recent Records */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>最近采集</Text>
        <View style={styles.recordsContainer}>
          <RecordItem
            icon="person"
            title="李明 - 人口信息"
            date="2023-06-15"
            onPress={() => router.push('/collect/person-detail/1')}
          />
          <RecordItem
            icon="home"
            title="东湖小区3栋2单元 - 房屋信息"
            date="2023-06-14"
            onPress={() => router.push('/collect/house-detail/1')}
          />
          <RecordItem
            icon="storefront"
            title="东湖便利店 - 企业信息"
            date="2023-06-13"
            onPress={() => router.push('/collect/business-detail/1')}
          />
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  searchContainer: {
    padding: 16,
  },
  searchBar: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: theme.colors.white,
    borderRadius: 8,
    padding: 8,
    ...Platform.select({
      ios: {
        shadowColor: theme.colors.black,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 3,
      },
      web: {
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
      },
    }),
  },
  searchInput: {
    flex: 1,
    marginLeft: 8,
    fontSize: 16,
    color: theme.colors.text.primary,
  },
  gridContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 12,
    gap: 12,
  },
  gridItem: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    width: (Platform.OS === 'web' ? 'calc(33.33% - 8px)' : '30%'),
    aspectRatio: 1,
    ...Platform.select({
      ios: {
        shadowColor: theme.colors.black,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 3,
      },
      web: {
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
      },
    }),
  },
  gridItemText: {
    fontSize: 14,
    color: theme.colors.text.primary,
    marginTop: 8,
  },
  section: {
    padding: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: theme.colors.text.primary,
    marginBottom: 12,
  },
  recordsContainer: {
    backgroundColor: theme.colors.white,
    borderRadius: 12,
    ...Platform.select({
      ios: {
        shadowColor: theme.colors.black,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
      },
      android: {
        elevation: 3,
      },
      web: {
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
      },
    }),
  },
  recordItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border.light,
  },
  recordIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: theme.colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  recordContent: {
    flex: 1,
  },
  recordTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: theme.colors.text.primary,
    marginBottom: 4,
  },
  recordDate: {
    fontSize: 12,
    color: theme.colors.text.secondary,
  },
});